<template>
  <div class="job-container">
    <el-row :gutter="20" style="min-width: 1150px">
      <el-col :span="14">
        <div class="grid-content bg-purple">
          <div class="head">
            <!-- <el-button type="success" size="mini" style="float: right">复制</el-button>-->
            <span>查询SQL</span>
            <span class="sql-copy-btn" v-clipboard:copy="sql"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError">
            复制
          </span>
            <div class="white_content">
              <el-scrollbar style="height: 100%">
                <pre v-if="queryDataGridItem">{{queryDataGridItem.sql}}</pre>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content bg-white">
          <div class="head">查询基本信息</div>
          <el-row>
            <el-col :span="6">项目：</el-col>
            <el-col :span="18" v-if="queryDataGridItem">{{queryDataGridItem.project}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">cube：</el-col>
            <el-col :span="18" v-if="queryDataGridItem">{{queryDataGridItem.cube}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">成功率：</el-col>
            <el-col :span="18" v-if="queryDataGridItem">{{queryDataGridItem.successRate * 100}}%</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">查询次数：</el-col>
            <el-col :span="18" v-if="queryDataGridItem">{{queryDataGridItem.queryCount}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">最慢响应时间：</el-col>
            <el-col :span="18" v-if="queryDataGridItem">{{queryDataGridItem.maxSlowQueryTime}}s</el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 15px;min-width: 1150px;">
      <el-col :span="24">
        <div class="chart_content" id="chart">
          <div class="head">查询历史</div>
          <LineChartArea :chart-data="queryHistory" theme="shine"></LineChartArea>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 15px;min-width: 1150px">
      <el-col :span="24">
        <div class="chart_content" style="height: 200px">
          <div class="head">子查询</div>
          <div class="view_center">
            <span v-for="item in rowkeyStats">
              <el-popover
                placement="top-start"
                width="200"
                trigger="hover">
                <el-row>
                  <el-col :span="10">基数：</el-col>
                  <el-col :span="14">{{item.baseNum}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">字段：</el-col>
                  <el-col :span="14">{{item.dataType}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">编码：</el-col>
                  <el-col :span="14">{{item.encoding}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">shardBy：</el-col>
                  <el-col :span="12">{{item.shardBy}}</el-col>
                </el-row>
              <span v-if="item.status === '1'" class="view_box" style="background-color: #AEC3FF;" slot="reference">
                {{item.rowkey}}
              </span>
              </el-popover>
              <el-popover
                placement="top-start"
                width="200"
                trigger="hover">
                <el-row>
                  <el-col :span="10">基数：</el-col>
                  <el-col :span="14">{{item.baseNum}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">字段：</el-col>
                  <el-col :span="14">{{item.dataType}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">编码：</el-col>
                  <el-col :span="14">{{item.encoding}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">shardBy：</el-col>
                  <el-col :span="12">{{item.shardBy}}</el-col>
                </el-row>
              <span v-if="item.status === '2'" class="view_box" style="background-color: #B3E9DC;" slot="reference">
                {{item.rowkey}}
              </span>
                </el-popover>
              <el-popover
                placement="top-start"
                width="200"
                trigger="hover">
                <el-row>
                  <el-col :span="10">基数：</el-col>
                  <el-col :span="14">{{item.baseNum}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">字段：</el-col>
                  <el-col :span="14">{{item.dataType}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">编码：</el-col>
                  <el-col :span="14">{{item.encoding}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">shardBy：</el-col>
                  <el-col :span="12">{{item.shardBy}}</el-col>
                </el-row>
              <span v-if="item.status === '3'" class="view_box" style="background-color: #CFE9B3;" slot="reference">
                {{item.rowkey}}
              </span>
                 </el-popover>
              <el-popover
                placement="top-start"
                width="200"
                trigger="hover">
                <el-row>
                  <el-col :span="10">基数：</el-col>
                  <el-col :span="14">{{item.baseNum}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">字段：</el-col>
                  <el-col :span="14">{{item.dataType}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">编码：</el-col>
                  <el-col :span="14">{{item.encoding}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">shardBy：</el-col>
                  <el-col :span="12">{{item.shardBy}}</el-col>
                </el-row>
              <span v-if="item.status === '4'" class="view_box" style="background-color: #AED8FF;" slot="reference">
                {{item.rowkey}}
              </span>
              </el-popover>
              <el-popover
                placement="top-start"
                width="200"
                trigger="hover">
                <el-row>
                  <el-col :span="10">基数：</el-col>
                  <el-col :span="14">{{item.baseNum}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">字段：</el-col>
                  <el-col :span="14">{{item.dataType}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">编码：</el-col>
                  <el-col :span="14">{{item.encoding}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">shardBy：</el-col>
                  <el-col :span="12">{{item.shardBy}}</el-col>
                </el-row>
              <span v-if="item.status === '5'" class="view_box" style="background-color: #CCC;" slot="reference">
                {{item.rowkey}}
              </span>
                </el-popover>
            </span>
          </div>
          <div class="jobinfo-right">
            <div class="item">
              <span class="span-color" style="background-color: #AEC3FF"></span>
              <span>过滤</span>
            </div>
            <div class="item">
              <span class="span-color" style="background-color: #B3E9DC"></span>
              <span>Group By</span>
            </div>
            <div class="item">
              <span class="span-color" style="background-color: #CFE9B3"></span>
              <span>过滤&Group By</span>
            </div>
            <div class="item">
              <span class="span-color" style="background-color: #AED8FF"></span>
              <span>出现</span>
            </div>
            <div class="item">
              <span class="span-color" style="background-color: #CCC"></span>
              <span>缺少</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import LineChartArea from './components/LineChartArea'
  import queryApi from '@/api/kylin/query'

  export default {
    name: 'queryInfo',
    components: {
      LineChartArea
    },
    data() {
      return {
        params: {
          md5: this.$route.query.md5,
          state: this.$route.query.state,
          startDate: this.$route.query.startDate,
          endDate: this.$route.query.endDate
        },
        queryDataGridItem: null,
        queryHistory: null,
        rowkeyStats: null,
        sql: null
      }
    },
    methods: {
      onCopy: function(e) {
        this.$message({
          message: '复制成功',
          type: 'success'
        })
      },
      onError: function(e) {
        this.$message({
          message: '复制失败',
          type: 'error'
        })
      }
    },
    created() {
      queryApi.queryDataGridItem(this.params).then(resp => {
        this.queryDataGridItem = resp.data
        this.sql = this.queryDataGridItem.sql
      })
      queryApi.queryHistory(this.params).then(resp => {
        this.queryHistory = resp.data
      })
      queryApi.rowkeyStats(this.params).then(resp => {
        this.rowkeyStats = resp.data
      })
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .job-container {
    background-color: #f4f6f9;
    height: calc(100% - 50px);
    color: #3A3A3A;
    padding: 15px;

  .grid-content {
    border: 1px solid #E8E8E8;
    border-radius: 4px;
    height: 218px;
    padding: 10px;
  }

  .head {
    height: 23px;
    line-height: 23px;
    margin-bottom: 8px;

  .sql-copy-btn {
    display: inline-block;
    color: #fff;
    float: right;
    width: 44px;
    height: 23px;
    cursor: pointer;
    font-size: 12px;
    background: #8CC749;
    border-radius: 3px;
    text-align: center;
    font-family: "PingFangSC-Light", sans-serif;
  }

  }
  .bg-purple {
    background: #F0F0F0;

  .white_content {
    border-radius: 4px;
    background: #fff;
    width: 100%;
    height: 165px;
    margin-top: 10px;
    color: #000000;
    font-size: 12px;
    padding: 10px;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  }
  }
  .bg-white {
    background: #FFF;

  .el-row {
    margin-left: 10px;
    margin-top: 15px;
    color: #6D6D6D;
  }

  }
  .chart_content {
    display: flex;
    padding: 10px;
    flex-direction: column;
    height: 274px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #E8E8E8;

  .view_center {
    height: 90px;
    padding: 10px 20px;
    color: #3A3A3A;
  .view_box {
    font-size: 18px;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    text-align: center;
    color: #3A3A3A;
    font-size: 12px;
    opacity: 0.5;
    padding: 0 12px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 11px 12px 0;
  }

  }
  .jobinfo-right {
    right: 10px;
    bottom: 10px;
    position: absolute;
    margin-right: 15px;

  .item {
    margin-left: 15px;
    display: inline-bloke;
    float: left;

  span {
    display: inline-block;
  }

  .span-color {
    margin: auto;
    height: 5px;
    width: 5px;
  }

  }
  }
  }
  }
</style>
